<template>
    <div class="project-container h-full flex flex-col">
        <div class="projects flex-1 flex flex-wrap overflow-y-auto p-4">
            <template v-if="state.data.length">
                <a-card 
                    class="mr-2 mb-5"
                    style="width: 290px;height: 250px;"
                    v-for="i in state.data"
                >
                    <template #title>
                        {{ i.projectName }}
                    </template>
                    <div class="project-item">
                        <div class="image mb-2 cursor-pointer overflow-hidden" @click="viewImg(i)">
                            <img
                                :src="i.coverImg ? `/${i.coverImg}` : notFoundImg"
                            />
                        </div>
                        <div class="footer-opt flex w-full justify-between">
                            <div class="desc w-[25%] overflow-hidden whitespace-nowrap text-ellipsis">
                                {{ i.remark }}
                            </div>
                            <div class="icon flex items-center flex-1 justify-end">
                                <div class="tag flex items-center">
                                    <template v-if="i.isPublish == 1" >
                                        <span class="block w-2 h-2 rounded mr-1" style="background-color: #34c749;"></span>已发布
                                    </template>
                                    <template v-else>
                                        <span  class="block w-2 h-2 rounded mr-1" style="background-color: red;"></span>未发布
                                    </template>
                                </div>
                                <a-button class="ml-2" shape="circle" :icon="h(ToolOutlined)" @click="editDetail(i)"/>
                                <a-dropdown>
                                    <template #overlay>
                                        <a-menu>
                                            <a-menu-item @click="editProjectDetail(i)">
                                                <ToolOutlined />基础修改
                                            </a-menu-item>
                                            <a-menu-item @click="deleteProj(i)">
                                                <DeleteOutlined />删除
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                    <a-button class="ml-2" shape="circle" :icon="h(EllipsisOutlined)" />
                                </a-dropdown>
                            </div>
                        </div>
                    </div>
                </a-card>
            </template>
            <template v-else>
                <div class="flex-1 flex items-center justify-center flex-col">
                    <img 
                        :src="notFoundImg" 
                        class="w-[200px] h-[200px] object-contain opacity-50"
                    />
                    <p class="text-gray-400 mt-4">暂无项目，快去创建一个吧！</p>
                </div>
            </template>
            <cover-img-view ref="coverImgViewRef"/>
        </div>
        <div class="pagination-wrapper  py-4 px-4 bg-white">
            <a-pagination
                v-model:current="state.tableParams.page"
                v-model:page-size="state.tableParams.pageSize"
                show-size-changer
                :pageSizeOptions="['5', '10', '20', '50']"
                :total="state.tableParams.total"
                :show-total="(total:any) => `共 ${total} 个项目`"
                @change="handlePaginationChange"
            />
        </div>
        <add-proj-model ref="addProjModelRef"/>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, h ,ref} from 'vue';
import type { ItemType, ProjectStateType } from './types';
import notFoundImg from '@/assets/images/image-404.png'
import { EllipsisOutlined, ToolOutlined } from '@ant-design/icons-vue';
import coverImgView from './components/coverImgView.vue';
import { apiDataViewProjectPagePost ,apiDataViewProjectDeletePost} from '@/api/dataview/project';
import { emitter, showMsg } from '@/utils';
import type { ResType } from '@/api/types';
import type { TableParamsResType } from '@/views/system/onlineUser/type';
import { useRouter } from 'vue-router';
import addProjModel from '../../components/model/addProjModel.vue';


const router = useRouter()
const addProjModelRef = ref<InstanceType<typeof addProjModel>>()
const coverImgViewRef = ref<InstanceType <typeof coverImgView>>()

const state = reactive<ProjectStateType>({
    data: [],
    tableParams:{
        page:1,
        pageSize:5,
        total:0
    },
    loading:false,
})

const viewImg = (item:any)=>{
    coverImgViewRef.value?.handleOpen(item)
}

const handleQuery = async (formQuery?:any)=>{
    state.loading = true
    const params = Object.assign({},formQuery,state.tableParams)
    const res = await apiDataViewProjectPagePost(params) as ResType<TableParamsResType<ItemType>>
    state.data = res.data.result.items
    state.tableParams.total = res.data.result.total
    state.loading = false
}

const handlePaginationChange = (page:number, pageSize:number)=>{
    state.tableParams.page = page
    state.tableParams.pageSize = pageSize
    handleQuery()
}

const deleteProj = async(item:any)=>{
    await apiDataViewProjectDeletePost({id:item.id})
    showMsg("删除成功",'success')
    await handleQuery()
}

const editDetail = (item:any)=>{
    router.push({
        path:`/design/${item.id}`,
    })
}
const editProjectDetail = (item:any)=>{
    addProjModelRef.value?.handleOpen(item)
}
onMounted(()=>{
    emitter.on('project-search',handleQuery)
    handleQuery()
})
</script>

<style lang="scss" scoped>
.projects {
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
    .project-item{
        width: 100%;
        .image{
            height: 150px;
            background-image: radial-gradient(#000000 1px, transparent 1px);
            background-size: 10px 10px;
            background-color: #ffffff;
            border-radius: 5px;
            img{
                height: 100%;
                width: 100%;
            }
        }
    }
}

:deep(.ant-btn >span) {
    display:inline-flex!important;
}
</style>